// import React,{ useEffect } from 'react'
import 'antd/dist/antd.css'
// import {Row,Col, Menu} from 'antd'
import {
  HomeOutlined,
} from '@ant-design/icons';

import React, { useEffect } from 'react';
import './index.less';
import { Link, Route } from 'react-router-dom';
import { Layout } from 'antd';

const { Content } = Layout;

function Header() {
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
  }, [])

  const handleScroll = (e) => {
    var header = document.getElementById('header'); //定义一个dom节点为'header'的header变量
    if (window.pageYOffset >= 300) {  //if语句判断window页面Y方向的位移是否大于或者等于导航栏的height像素值
      header.classList.add('header_bg');  //当Y方向位移大于5rem时，定义的变量增加一个新的样式'header_bg'
    } else {
      header.classList.remove('header_bg'); //否则就移除'header_bg'样式
    }
  }

  return (
    <div className="page" id="page">
      <Layout>
        <div className="header" id="header">
          <div className="brand">
            {/* <Link to="/"> */}
            <HomeOutlined />
            {/* </Link> */}
          </div>
          <div className="nav">
            <ul>
              <li>
                {/* <Link to="/technology"> */}
                <HomeOutlined />
                首页
                {/* </Link> */}
              </li>
              <li>
                {/* <Link to="/case"> */}
                <HomeOutlined />
                生活
                {/* </Link> */}
              </li>
              <li>
                {/* <Link to="/about"> */}
                {/* <img src={("./img/dkgw_gywm.png")} alt="关于DUCK" width="32" height="32"/> */}
                <HomeOutlined />
                技术
                {/* </Link> */}
              </li>
              <li>
                {/* <Link to="/join"> */}
                {/* <img src={("./img/dkgw_jrwm.png")} alt="加入我们" width="32" height="32"/> */}
                <HomeOutlined />
                友情链接
                {/* </Link> */}
              </li>
            </ul>
          </div>
        </div>

        {/* <Content className="content" id="content">
            <Route path="/" exact component={ Home }/>
            <Route path="/technology" component={ CoreTechnology }/>
            <Route path="/case" component={ Case }/>
            <Route path="/about" component={ About }/>
            <Route path="/join" component={ Join }/>
          </Content> */}
      </Layout>
    </div>
  );

}

export default Header;